<template>
  <view class="box">
    <view class="tou topNoBg fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/black_fanhui.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      <text style="margin-left: 75rpx">
        {{ pageTitle }}
      </text>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text style="margin-left: 75rpx">
        {{ pageTitle }}
      </text>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <image
        @click="fn"
        class="image2"
        src="https://pic.bangbangtongcheng.com/5bfdd20804944e49ac44a6d4acbf1225"
        mode="widthFix"
      />
      <!-- #endif -->
    </view>
    <view>
      <view class="shangchuan">
        <view class="cu-form-group" style="padding: 0; border-radius: 20rpx; overflow: hidden">
          <view class="grid col-4 grid-square flex-sub">
            <view
              class="bg-img"
              style="width: 30%; margin-right: 20rpx"
              v-for="(item, index) in imgList"
              :key="index"
            >
              <image
                @tap.stop="ViewImage"
                :data-url="imgList[index]"
                :src="imgUrl + item.url"
                mode="aspectFit"
              />
              <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view
              class="solids"
              @tap="getPermissions(1)"
              v-if="index == -1"
              style="width: 100%; margin: 0rpx; background-color: #ebebed"
            >
              <text class="cuIcon-cameraadd"><span style="font-size: 24rpx">上传照片</span></text>
            </view>
            <view class="solids" @tap="getPermissions(1)" v-if="index == '0' && imgList.length < 2">
              <text class="cuIcon-cameraadd"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="shangchuan">
        <view class="cu-form-group" style="padding: 0; border-radius: 20rpx; overflow: hidden">
          <view class="grid col-4 grid-square flex-sub">
            <view
              class="bg-img"
              style="width: 30%; margin-right: 20rpx"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <view class="videoPlay" @click.stop="ylvideo(item.url)">
                <image :src="imgUrl + item.url + '?vframe/jpg/offset/0'" mode="aspectFit"></image>
                <image
                  class="images"
                  src="https://pic.bangbangtongcheng.com/static/bbcz/mdlb-sp01.png"
                  mode=""
                ></image>
              </view>
              <view class="cu-tag bg-red" @tap.stop="DelVidio" :data-index="index">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view
              class="solids"
              @tap="getPermissions(2)"
              v-if="videoIndex == -1"
              style="width: 100%; margin: 0rpx; background-color: #ebebed"
            >
              <text class="cuIcon-cameraadd"><span style="font-size: 24rpx">上传视频</span></text>
            </view>
            <view
              class="solids"
              @tap="getPermissions(2)"
              v-if="videoIndex == '0' && videoList.length < 1"
            >
              <text class="cuIcon-cameraadd"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="inputGroup">
        <view class="title">
          <input type="text" placeholder="请输入标题" v-model="title" />
        </view>
        <view class="wenben">
          <textarea
            class="textarea"
            v-model="desc"
            maxlength="300"
            placeholder="请输入描述"
            cols="30"
            rows="10"
          ></textarea>
          <span class="zishu">{{ desc.length }}/300</span>
        </view>
      </view>
      <view class="button" @click="submit">提交</view>
    </view>
    <previewImgV ref="previewImgV"></previewImgV>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  import previewImgV from '@/components/previewImgV.vue'
  export default {
    data() {
      return {
        imgUrl: this.$imgSrc,
        pageTitle: '我的主页',
        imgList: [],
        videoList: [],
        index: -1,
        videoIndex: -1,
        title: '',
        desc: '',
        type: 0, // 当前编辑主页的类型
      }
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    components: {
      previewImgV: previewImgV,
    },
    onLoad(option) {
      if (option.type == 1) {
        this.title = ''
      } else if (option.type == 2) {
      }
    },
    methods: {
      submit() {},
      fanhui() {
        uni.navigateBack()
      },
      ylvideo(url) {
        this.$refs.previewImgV.open(url)
      },
      ViewImage(e) {
        let image = []
        image.push(e.currentTarget.dataset.url.url)
        uni.previewImage({
          urls: image,
          current: e.currentTarget.dataset.url.url,
        })
      },
      DelImg(e) {
        const i = e.currentTarget.dataset.index
        uni.showModal({
          title: '',
          content: `确定要删除该图片？`,
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(i, 1)
              if (this.imgList.length == 0) {
                this.index = -1
              }
            }
          },
        })
      },
      DelVidio(e) {
        const i = e.currentTarget.dataset.index
        uni.showModal({
          title: '',
          content: `确定要删除该视频`,
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.videoList.splice(i, 1)
              if (this.videoList.length == 0) {
                this.videoIndex = -1
              }
            }
          },
        })
      },
      async getPermissions(type) {
        // #ifdef APP-PLUS
        this.ChooseImage(type)
        // #endif
        // #ifdef MP-WEIXIN
        this.ChooseImage(type)
        // #endif
      },
      ChooseImage(type) {
        let _this = this
        if (type == 1) {
          uni.chooseImage({
            count: 9,
            sizeType: ['copressed'],
            sourceType: ['camera', 'album'],
            success(res) {
              const tempFiles = res.tempFiles
              let panduan = false
              tempFiles.forEach((i, j) => {
                let length = ''
                // #ifdef H5
                length = i.name.length
                let resType = i.name.substring(length - 1, length)
                // #endif
                // #ifndef H5
                length = i.path.length
                let resType = i.path.substring(length - 1, length)
                // #endif
                if (resType != 'g' && resType != 'G') {
                  panduan = true
                }
              })
              if (panduan) {
                uni.showToast({
                  title: '不支持当前文件格式',
                  icon: 'none',
                })
                return
              }
              //_this.index = indexss;
              //因为有一张图片， 输出下标[0]， 直接输出地址
              var imgFiles = res.tempFilePaths
              // console.log(imgFiles);
              if (_this.imgList.length + imgFiles.length > 9) {
                uni.showToast({
                  title: '图片最多不能超过9张',
                  duration: 2000,
                  icon: 'none',
                })
                return
              }
              var uper
              imgFiles.forEach((el) => {
                uni.showToast({
                  title: '正在上传请稍后',
                  icon: 'none',
                  duration: 2000,
                })
                uper = uni.uploadFile({
                  // 需要上传的地址
                  url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                  // filePath  需要上传的文件
                  filePath: el,
                  name: 'file',
                  success(res1) {
                    _this.imgList.push({
                      type: 'image',
                      url: JSON.parse(res1.data).data[0].url,
                    })
                    _this.index = '0'
                  },
                })
              })
              // onProgressUpdate 上传对象更新的方法
              uper.onProgressUpdate(function (res) {})
            },
            fail: (fail) => {
              uni.showModal({
                title: '提示',
                content: '操作权限已被拒绝，请手动前往设置',
                confirmText: '立即设置',
                success: (res) => {
                  if (res.confirm) {
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  }
                },
              })
            },
          })
        } else {
          uni.chooseVideo({
            count: 1,
            sourceType: ['camera', 'album'],
            success: (res) => {
              //_this.index = indexss;
              var imgFiles = res.tempFilePath
              //#ifdef H5
              const tempFiles = res.tempFile
              let resSize = tempFiles.size
              if (resSize > 52428800) {
                uni.showToast({
                  title: '上传视频大小不能超过50MB',
                  icon: 'error',
                })
                return
              }

              let resType = tempFiles.type.substring(0, 5)
              if (resType != 'video') {
                uni.showToast({
                  title: '不支持当前文件格式',
                  icon: 'error',
                })
                return
              }
              //#endif
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                mask: true,
                duration: 2000,
              })
              var uper
              _this.video_chage = true
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: imgFiles,
                name: 'file',
                success(res1) {
                  // console.log(res);
                  _this.videoList.push({
                    type: 'video',
                    url: JSON.parse(res1.data).data[0].url,
                  })
                  _this.videoIndex = '0'
                },
                fail: (err) => {
                  uni.showModal({
                    content: err.errMsg,
                    showCancel: false,
                  })
                },
                complete: (res) => {
                  /* 走到这里 不是完成就是失败 */
                  // console.log(res);
                  _this.video_chage = false
                },
              })
              // uper.onProgressUpdate(function (res) {
              //   console.log(res);
              //   if (res.progress === 100) _this.video_chage = false;
              // });
            },
            fail: (fail) => {
              uni.showModal({
                title: '提示',
                content: '操作权限已被拒绝，请手动前往设置',
                confirmText: '立即设置',
                success: (res) => {
                  if (res.confirm) {
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  }
                },
              })
            },
          })
        }
        // uni.showActionSheet({
        // 	itemList: ["上传图片", "上传视频"],
        // 	success: (res) => {
        // 		let indexss = res.tapIndex;

        // 	},
        // });
      },
    },
  }
</script>

<style lang="less" scoped>
  .button {
    width: 710rpx;
    height: 90rpx;
    background: #0fa291;
    border-radius: 45rpx;
    position: fixed;
    bottom: 50rpx;
    left: 20rpx;
    color: white;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    // padding-bottom: 100rpx;
    background-color: #f5f7f9;
    padding-bottom: 180rpx;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: left;
    line-height: 88rpx;
    font-size: 36rpx;
    color: black;
    //background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      bottom: 16rpx !important;
      // top: 116rpx;
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
    }
  }

  .shangchuan {
    margin-top: 24rpx;
    //width: 710rpx;
    padding: 0 20rpx;
    border-bottom: 1px solid #eee;

    .videoPlay {
      width: 100%;
      height: 100%;

      .images {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .inputGroup {
    width: 710rpx;
    margin: 0 20rpx;
    background: white;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 30rpx 20rpx;

    view {
      border: 1rpx solid #cccccc;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      padding: 30rpx 20rpx;
      //color: #CCCCCC;
    }

    .title {
    }

    .wenben {
      position: relative;
      width: 670rpx;
      min-height: 250rpx;
      border-radius: 8rpx;
      // border: 1px solid #E0E0E0;
      margin: 0 auto;
      padding-bottom: 44rpx;

      .textarea {
        width: 100%;
        min-height: 200rpx;
        //padding: 10rpx;
        color: #333;
        font-size: 28rpx;
      }

      .zishu {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        //color: #64b6a8;
        font-size: 24rpx;
        background: #ebebed;
        border-radius: 4rpx;
        padding: 8rpx 24rpx;
      }
    }
  }
</style>
